<template>
    <div>
        <div class="noData-wrapper" v-if="!IsData">
            <div class="noData-text">
                暂无数据，请检查网络
            </div>
            <div class="mock-wrapper"></div>
        </div>
        <div class="news-page-wrapper" v-if="IsData">
            <div class="news-content-wrapper" v-for="(news,index) in newsData">
                <div class="news-title" v-on:click="getNewsContentById(news.news_id)">
                    {{news.news_title}}
                </div>
                <div class="news-content" v-on:click="getNewsContentById(news.news_id)">
                    {{news.news_content}}
                </div>
                <div class="news-other">
                    <div class="news-time">
                        {{news.news_time}}
                    </div>
                    <div class="news-maker">
                        {{news.news_maker}}
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <div class="news-page-left-change">
                <el-pagination @current-change="handleCurrentChange" :current-page="page" :page-size="5" layout="prev, pager, next, jumper"
                    :total="totalNewsNum">
                </el-pagination>
            </div>
            <!--弹出的新闻详情-->
            <el-dialog title="新闻内容" v-model="dialogVisible" size="full">
                <div class="detail-title">
                    <h3>{{this.getNewsTitle}}</h3>
                </div>
                <div class="detail-title">
                    <h5>作者：{{this.getNewsMaker}}&nbsp;&nbsp;&nbsp;&nbsp;时间：{{this.getNewsTime}}</h5>
                </div>
                <div class="detail-content" v-html="getNewsContent" ref="content">
                </div>
                <span slot="footer" class="dialog-footer">
    <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import moment from 'moment'
    require('moment/locale/zh-cn')

    const API_BASE = 'http://192.168.191.1'

    export default {
        data() {
            return {
                // 控制新闻栏和占位栏是否显示
                IsData: true,
                // 页数
                page: 1,
                // 总数据条数
                totalNewsNum: 20,
                // 新闻列表信息
                newsData: [],
                // 加载的新闻详情数据
                getNewsContent: '',
                getNewsTitle: '',
                getNewsMaker: '',
                getNewsTime: '',
                // 控制新闻详情框是否显示
                dialogVisible: false
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val
                this.getNewsList()
            },
            // 获取新闻资讯页面新闻信息
            getNewsList() {
                this.$http({
                    method: 'GET',
                    url: API_BASE + '/cyxy/indexNewsList.php',
                    params: {
                        page: this.page,
                        pageSize: '5'
                    },
                    headers: { "x-requested-with": "XMLHttpRequest" },
                    emulateJSON: true
                }).then(function (res) {
                    console.log(res.body)
                    if (res.body.code === 200) {
                        this.IsData = true
                        this.newsData = []
                        for (var i = 0; i < res.body.data.length; i++) {
                            // 时间戳转换为正常时间
                            res.body.data[i].news_time = moment(res.body.data[i].news_time * 1000).format('YYYY-MM-DD');
                            // 使用正则表达式替换掉所有的 html标签，得到Html标签中的内容
                            var haveHtml = res.body.data[i].news_content
                            var cutHtml1 = haveHtml.replace(/<\/?.+?>/g, "")
                            var cutHtml2 = cutHtml1.replace(/ /g, "")
                            // var cutHtml3 = cutHtml2.replace("&nbsp;", "")
                            var cutHtml4 = cutHtml2.replace(/&nbsp;/g, "")
                            res.body.data[i].news_content = cutHtml4
                            // 数据塞到渲染列表的数组里
                            this.newsData.push(res.body.data[i])
                        }
                        // 数据总条数赋值给分页组件
                        if (this.totalNewsNum != res.body.message) {
                            this.totalNewsNum = res.body.message - 0
                        }
                        // console.log(this.newsData)
                    } else {
                        this.IsData = false
                        console.log('获取首页新闻数据失败')
                    }
                }, function (err) {
                    this.IsData = false
                    console.log('获取新闻资讯页面数据时服务器没响应')
                    console.log(err)
                })
            },
            // 获取新闻详情信息
            getNewsContentById(id) {
                this.getNewsContent = ''
                this.getNewsTitle = ''
                this.getNewsMaker = ''
                this.getNewsTime = ''
                this.$http({
                    url: API_BASE + '/cyxy/newsContent.php',
                    methods: 'GET',
                    params: {
                        newsId: id,
                    },
                    headers: { "X-Requested-With": "XMLHttpRequest" },
                    emulateJSON: true
                }).then(function (res) {
                    console.log(res.body)
                    if (res.body.code === 200) {
                        var cutImg = res.body.data['news_content'].replace(/<img[^>]+>/g, '');
                        var cutImg = cutImg.replace(/&nbsp;/g, "")
                        this.getNewsContent = cutImg;
                        this.getNewsTitle = res.body.data['news_title'];
                        this.getNewsMaker = res.body.data['news_maker'];
                        this.getNewsTime = moment(res.body.data['news_time'] * 1000).format('YYYY-MM-DD HH:mm');
                        // 延迟一会儿打开让数据加载完
                        var _this = this
                        window.setTimeout(function () {
                            _this.dialogVisible = true
                        }, 50)
                    } else {
                        this.$message({
                            showClose: true,
                            message: '没获取到新闻数据，请返回重试',
                            type: 'warning'
                        });
                    }
                }, function (err) {
                    this.$message({
                        showClose: true,
                        message: '服务器没响应，没获取到新闻数据，请检查网络',
                        type: 'error',
                    });
                })
            },
        },
        mounted() {
            this.getNewsList()
        }
    }

</script>

<style scoped>
    .news-page-wrapper {
        background: #fff;
    }
    /*没有数据的显示框*/
    
    .noData-wrapper {
        position: relative;
        background: #fff;
        height: 150px;
    }
    
    .noData-wrapper .noData-text {
        position: relative;
        top: 50px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
    }
    
    .noData-wrapper .mock-wrapper {
        position: absolute;
        bottom: 0;
        height: 25px;
        width: 100%;
        background: #F7F5F3;
    }
    /*每一条新闻样式*/
    
    .news-content-wrapper {
        width: 96%;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 10px 5px;
        /*background: #fff;*/
        border-bottom: 1px solid #d9dde1;
    }
    
    .news-title {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: #07111b;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2;
    }
    
    .news-content {
        height: 35px;
        margin-top: 5px;
        font-size: 12px;
        color: #93999f;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical;
        /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2;
    }
    
    .news-other {
        margin-top: 5px;
        font-size: 10px;
        color: #7c7c7c;
    }
    
    .news-time {
        display: inline-block;
    }
    
    .news-maker {
        display: inline-block;
        float: right;
        margin-right: 10px;
    }
    /*分页组件样式*/
    
    .news-page-left-change {
        margin: 20px 0 0 10px;
    }
    /*新闻详情样式*/
    
    .detail-title {
        margin-top: 5px;
    }
    
    .detail-title h3,
    h5 {
        margin: 0;
        padding: 0;
    }
    
    .detail-content {
        overflow: auto;
    }
</style>